<template>
  <div class="temp_container">
    <div class="temp_item">
      <div class="item_label">添加模板</div>
      <div class="item_box">
        <div class="item_li" @click="addTemp()">
          <van-icon name="add" size="0.7rem" color="#15c194" />
          <div class="li_text">
            <div class="text">创建新模板</div>
            <van-icon name="arrow" size="0.4rem" color="#cdcdcd" />
          </div>
        </div>
      </div>
    </div>
    <div class="temp_item" v-if="isManager == 'true'">
      <div class="item_label">
        <div>模板列表</div>
        <div class="search">
          <van-field
            v-model="name"
            placeholder="搜索模板"
            @update:model-value="getList()"
          />
        </div>
      </div>
      <div class="item_box">
        <div
          class="item_li"
          v-for="(item, index) in tempList"
          :key="index"
          @click="editItem(item)"
        >
          <van-icon
            class="iconfont"
            class-prefix="icon"
            :name="item.logImg.Icon"
            :color="item.logImg.Color"
            size="0.7rem"
          />
          <div class="li_text">
            <div class="text">{{ item.name }}</div>
            <div class="operation">
              <van-icon
                name="ellipsis"
                size="0.6rem"
                color="#cdcdcd"
                @click.stop="openHandle(index)"
                style="z-index: 99"
              />
              <div class="oper_box" v-if="clickIndex == index">
                <div class="oper_li" @click.stop="copyItem(item)">复制</div>
                <div class="oper_li" @click="editItem(item)">编辑</div>
                <div class="oper_li" @click.stop="delItem(item)">删除</div>
              </div>
              <div
                class="mask"
                v-if="maskFlag"
                @click.stop="closeHandle()"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <transition name="fade">
      <div class="toast" v-show="showToast">
        {{ showToastText }}
      </div>
    </transition>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { getTemplateList, delTemplate, AddTemplate } from "@/api/log";
import { onMounted, ref } from "vue";
import { Dialog } from "vant";
import { Toast } from "vant";

onMounted(() => {
  getList();
});
const router = useRouter();
const name = ref("");
const tempList = ref([]);
const getList = async () => {
  const res = await getTemplateList({ name: name.value });
  tempList.value = res.data;
  tempList.value.forEach((item) => {
    item.logImg = JSON.parse(item.logImg);
  });
};
let isManager = localStorage.getItem("isManager");
console.log("isManager", isManager);

const showToast = ref(false);
const showToastText = ref("");
const addTemp = () => {
  if (isManager == "true") {
    router.push({ name: "addTemp", query: { id: null } });
  } else {
    showToast.value = true;
    showToastText.value = "已开启仅管理员可以创建模板，如需创建请联系管理员";
    setTimeout(() => {
      showToast.value = false;
    }, 2000);
  }
};
const clickIndex = ref(-1);
const maskFlag = ref(false);
const openHandle = (i) => {
  clickIndex.value = i;
  maskFlag.value = true;
};
const closeHandle = () => {
  clickIndex.value = -1;
  maskFlag.value = false;
};
//复制
const copyItem = async (item) => {
  item.name = item.name + "-副本";
  item.appointFor = JSON.parse(item.appointFor);
  item.defaultFor = JSON.parse(item.defaultFor);
  item.fields = JSON.parse(item.fields);
  console.log("item", item);
  const res = await AddTemplate(item);
  if (res.code == 200) {
    Toast.success("复制成功");
    clickIndex.value = -1
    maskFlag.value = false;
    getList();
  }
};
//跳转到编辑页面
const editItem = (item) => {
  router.push({ name: "addTemp", query: { id: item.id } });
};
//删除模板
const delItem = (item) => {
  Dialog.confirm({
    title: "确定删除吗?",
  }).then(async () => {
    const res = await delTemplate({ id: item.id });
    console.log(res);
    if (res.code == 200) {
      Toast.success("删除成功");
      maskFlag.value = false;
      clickIndex.value = -1;
      getList();
    }
  });
};
</script>
<style lang="scss" scoped>
.temp_container {
  position: relative;
  .temp_item {
    margin-bottom: 20px;
    .item_label {
      color: #c0c0c0;
      font-size: 0.4rem;
      padding: 0 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 5px;
      :deep(.van-cell) {
        padding: 0 5px;
      }
    }
    .item_box {
      box-shadow: 0 0 0.5px #c0c0c0;
      background-color: #fff;
      margin-top: 10px;
      .item_li {
        display: flex;
        align-items: center;
        padding-left: 10px;
        box-sizing: border-box;
        .li_text {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-left: 10px;
          border-bottom: 2px solid #f5f5f5;
          padding: 15px 10px 15px 0;
          box-sizing: border-box;
          cursor: pointer;
          position: relative;
          .text {
            font-weight: bold;
            font-size: 0.4rem;
          }
          .operation {
            position: relative;
            display: flex;
            .oper_box {
              width: 80px;
              position: absolute;
              top: -20px;
              left: -100px;
              box-sizing: border-box;
              background-color: #fff;
              box-shadow: 0 0 2px #ddd;
              border-radius: 5px;
              z-index: 99;
              text-align: center;
              .oper_li {
                font-size: 0.3rem;
                padding: 10px;
                box-sizing: border-box;
                &:hover {
                  background-color: #22a6f2;
                  color: #fff;
                }
              }
            }
            .mask {
              position: fixed;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              z-index: 9;
              background-color: #ddd;
              opacity: 0.2;
            }
          }
        }
      }
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.4s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
  .toast {
    padding: 20px;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.4rem;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 5px;
    transition: opacity 0.5s linear;
  }
}
</style>
